<!-- user表单弹窗 -->
<form id="menu-form" lay-filter="menu-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
            <select name="parentId">
                <option value="-1"></option>
                <option th:each="menu : ${menus}" th:value="${menu.id}" th:text="${menu.menuName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input name="menuName" placeholder="请输入菜单名称" type="text" class="layui-input" maxlength="50"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-block">
            <input name="authority" placeholder="请输入权限标识" type="text" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单url</label>
        <div class="layui-input-block">
            <input name="menuUrl" placeholder="请输入菜单url" type="text" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <input id="iconPicker" name="menuIcon" type="text" lay-filter="iconPicker" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否为菜单</label>
        <div class="layui-input-block">
            <input type="radio" name="isMenu" value="0" title="是" checked/>
            <input type="radio" name="isMenu" value="1" title="否"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序号</label>
        <div class="layui-input-block">
            <input name="sort" placeholder="请输入排序号" type="number" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" app-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="menu-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'admin', 'form', 'iconPicker', 'jquery'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const admin = layui.admin;
        const form = layui.form;
        const iconPicker = layui.iconPicker;

        form.render('radio');
        form.render('select');

        // 图标选择器初始化：https://fly.layui.com/extend/iconPicker/
        iconPicker.render({
            elem: '#iconPicker', // 选择器，推荐使用input
            type: 'fontClass',  // 数据类型：fontClass/unicode，推荐使用fontClass
            search: false, // 是否开启搜索：true/false
            page: true,  // 是否开启分页
            limit: 12 // 每页显示数量，默认12
        });

        let url = 'system/menu/add';
        // 回显Menu数据
        const menu = admin.getTempData('t_menu');
        if (menu) {
            url = basePath + (menu.id ? 'system/menu/update' : url);
            menu.isMenu = menu.isMenu ? menu.isMenu.toString() : '';
            menu.menuIcon ? iconPicker.checkIcon('iconPicker', menu.menuIcon) : ''; // 图标回显： 参数, lay-filter、iconName
            form.val('menu-form', menu);
        }

        // 表单提交事件
        form.on('submit(menu-form-submit)', function (data) {
            layer.load(2);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                console.info(data.success);
                if (data.success) {
                    layer.msg(data.msg, {icon: 1});
                    admin.finishPopupCenter();
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });
    });
</script>